import React from 'react';
import {connect} from 'dva/index';
import debounce from 'lodash/debounce';
import {
    AutoComplete,
    Button,
    Col,
    DatePicker,
    Form,
    Input,
    InputNumber,
    message,
    Modal,
    Popconfirm,
    Row,
    Select,
    Table
} from 'antd';
import Constants from '../../utils/Constants';
import RightConstants from '../../utils/RightConstants';
import RightBox from '../commons/RightBox';
import {pageObjGenerator} from '../../utils/commons'
import moment from 'moment';
import BizParams from "../commons/BizParams";

const statusClaimed = ['删除', '认领中', '待审核', '认领完成'];
const FormItem = Form.Item;
const R = require("ramda");


const revenueDetail = Form.create()(class RevenueDetail extends React.Component {
    constructor(props) {
        super(props);
        this.queryCompanys = debounce(this.queryCompanys, 500); //去抖
        this.state = {
            open: false,
            disabled: false,
            claim: false,  //true，认领动作进来
            approval: false,  //true，审核动作进来
            unClaimList: props.revenue.unClaimList ? props.revenue.unClaimList : [], //可选择的费用列表
            selectedLockedFees: [],         //选择的已锁定的费用集合
            selectedLockedFeeKeys: [],      //选择的已锁定的费用id集合
            selectedClaimableFees: [],      //选择的可认领的费用集合
            selectedClaimableFeeKeys: []    //选择的可认领的费用id集合
        }
    }

    closeWin = () => {
        this.handleCancel();
        if (this.props.refreshList) this.props.refreshList();
    }

    componentWillReceiveProps(nextProps) {

        if (!R.equals(this.props.revenue.unClaimList)(nextProps.revenue.unClaimList)) {
            this.setState({unClaimList: nextProps.revenue.unClaimList});
        }
    }


    componentDidMount() {
    }

    handleOpen = (disabled, claim, approval) => {
        this.setState({open: true, disabled, claim, approval});
    }

    handleCancel = () => {
        this.setState({open: false});
        (this.state.unClaimList).map(item => item.claimAmount = undefined)
        this.cleanSelected();
        this.cleanClaimableSelected();
        // this.refs.url.resetUpload();
        this.props.form.resetFields();
    }

    handleConfirm = (status) => {

        this.props.form.validateFields({force: true}, (errors, values) => {

            if (errors) return;
            values.id = this.props.revenue.dataSource && this.props.revenue.dataSource.id ? this.props.revenue.dataSource.id : null;
            values.status = status;
            values.receiveDate = values.receiveDate ? values.receiveDate.format(Constants.DATEFORMAT) : undefined;
            // values.url = this.refs.url.getUrl();

            // if (this.refs.url.getFiles().length === 0 ) { message.error("来帐凭证不能为空！"); return; }
            if (!R.equals(R.pick(Object.keys(values), this.props.revenue.dataSource), values)) {

                this.props.dispatch({
                    type: R.isNil(values.id) ? 'revenue/createRevenue' : 'revenue/updateRevenue',
                    payload: {
                        ...values,
                        onSuccess: (id) => {

                            //    if (!this.refs.url.getUrl() && this.refs.url.getFiles().length > 0) { //此判断的意思是，附件更换过，从无到有或者从A到B

                            this.closeWin()
                        }
                    }
                })
            } else this.handleCancel();

        });
    }

    handleSearchFee = (flag) => {
        this.cleanClaimableSelected();
        let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};
        //查询可认领的费用
        let condtions = this.props.form.getFieldsValue(['cstName', 'orderNo']);

        let newPage = R.pick(['page', 'size'], this.props.revenue.unClaimPage);
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'revenue/getUnClaimForPage',
            payload: {
                ...condtions,
                currency: dataSource.currency,
                revenueId: dataSource.id,
                ...newPage
            }
        });
    }

    onChangeClaimAmount = (feeId, value) => {
        let selectedClaimableFees = this.state.selectedClaimableFees;
        let unClaimList = this.state.unClaimList;
        this.state.selectedClaimableFees.map(item => {
            if (item.id === feeId) item.claimAmount = value
        });
        this.state.unClaimList.map(item => {
            if (item.id === feeId) item.claimAmount = value
        });
        this.setState(unClaimList);//just for refrehing page;
    }

    freshDetail = (id) => {
        //刷新当前来账
        this.props.dispatch({
            type: 'revenue/getRevenueById',
            payload: {id}
        });

        //刷新已锁定的费用
        this.props.dispatch({
            type: 'revenue/getListByBevenueId',
            payload: {
                revenueId: id,
                ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE) //重置成第一页，为了让用户明确知道认领成功
            }
        });

        //查询可认领的费用
        this.handleSearchFee();

        //刷新来账list
        if (this.props.refreshList) this.props.refreshList();
    }
    //币种为CNY的时候，汇率为1
    handleSelect = (value) => {
        if (value === "CNY") {
            this.props.form.setFieldsValue({rate: "1"})
        }
    }

    handleClaim = record => {
        let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};
        if (record.currency !== dataSource.currency) {
            message.error("来账币种与费用币种不一致，认领失败");
            return;
        }
        if (!record.claimAmount || record.claimAmount === 0) {
            message.error("关联金额必须大于0，认领失败");
            return;
        }
        if (record.claimAmount > dataSource.balance) {
            message.error("来账余额不足，认领失败");
            return;
        }
        if ((record.claimAmount > record.balance || record.claimAmount < 0) && record.balance > 0) {
            message.error("认领金额超过费用余额，认领失败");
            return;
        }
        if ((record.claimAmount < record.balance || record.claimAmount > 0) && record.balance < 0) {
            message.error("认领金额超过费用余额，认领失败");
            return;
        }
        this.props.dispatch({
            type: 'revenue/claimRevenue',
            payload: {
                revenueId: dataSource.id,
                cstId: record.id,
                claimAmount: record.claimAmount,
                onSuccess: () => {
                    //刷新当前来账
                    this.cleanClaimableSelected();
                    this.freshDetail(dataSource.id);
                }
            }
        });
    }

    handleBatchClaim = () => {
        let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};
        let total = 0;
        let list = [];
        let flag = true;
        this.state.selectedClaimableFees.map(record => {
            if (flag) {
                if (!record.claimAmount || record.claimAmount === 0) {
                    message.error("关联金额必须大于0，认领失败");
                    flag = false;
                }
                if ((record.claimAmount > record.balance || record.claimAmount < 0) && record.balance > 0) {
                    message.error("认领金额超过费用余额，认领失败");
                    flag = false;
                }
                if ((record.claimAmount < record.balance || record.claimAmount > 0) && record.balance < 0) {
                    message.error("认领金额超过费用余额，认领失败");
                    flag = false;
                }
                total = total + record.claimAmount;
                list.push({cstId: record.id, amount: record.claimAmount});
            }
        })
        if (flag && total > dataSource.balance) {
            message.error("来账余额不足，认领失败");
            return;
        }
        if (flag)
            this.props.dispatch({
                type: 'revenue/batchClaimRevenue',
                payload: {
                    revenueId: dataSource.id,
                    list,
                    onSuccess: () => {
                        //刷新当前来账
                        this.cleanClaimableSelected();
                        this.freshDetail(dataSource.id);
                    }
                }
            });
    }

    handleCancelClaim = (id) => {
        let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};
        this.props.dispatch({
            type: 'revenue/unClaimRevenue',
            payload: {
                claimId: id,
                onSuccess: () => {
                    //刷新当前来账
                    this.cleanSelected();
                    this.freshDetail(dataSource.id);
                }
            }
        });
    }

    batchCancelClaim = () => {
        let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};
        this.props.dispatch({
            type: 'revenue/batchCancelClaim',
            payload: {
                ids: this.state.selectedLockedFeeKeys,
                onSuccess: () => {
                    //刷新当前来账
                    this.cleanSelected();
                    this.freshDetail(dataSource.id);
                }
            }
        });
    }

    batchSubmitClaim = () => {
        let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};
        this.props.dispatch({
            type: 'revenue/batchSubmitClaim',
            payload: {
                ids: this.state.selectedLockedFeeKeys,
                onSuccess: () => {
                    //刷新当前来账
                    this.cleanSelected();
                    this.freshDetail(dataSource.id);
                }
            }
        });
    }

    handleConfirmClaim = (id) => {
        let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};
        this.props.dispatch({
            type: 'revenue/applyClaim',
            payload: {
                claimId: id,
                onSuccess: () => {
                    //刷新当前来账
                    this.cleanSelected();
                    this.freshDetail(dataSource.id);
                }
            }
        });
    }

    handleApproval = () => {
        let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};
        this.props.dispatch({
            type: 'revenue/approvalClaim',
            payload: {
                revenueId: dataSource.id,
                status: this.props.form.getFieldValue('result'),
                memo: this.props.form.getFieldValue('memo'),
                onSuccess: () => {
                    this.handleCancel();
                    if (this.props.refreshList) this.props.refreshList();
                }
            }
        });
    }

    queryCompanys = (name) => {
        this.props.dispatch({type: 'history/queryRevenue', payload: {name}});
    }

    cleanSelected = () => {
        this.setState({selectedLockedFees: [], selectedLockedFeeKeys: []});
    }

    cleanSelected2 = () => {
        (this.state.unClaimList).map(item => item.claimAmount = undefined)
        this.setState({selectedClaimableFees: [], selectedClaimableFeeKeys: []});
    }

    cleanClaimableSelected = () => {
        this.setState({selectedClaimableFees: [], selectedClaimableFeeKeys: []});
    }

    claimedColumns = [
        // {title: '核销编号', dataIndex: 'settleNo', key: 'settleNo'},
        // {title: '订单编号', dataIndex: 'orderno', key: 'orderno'},
        // {title: '费用名称', dataIndex: 'feeName', key: 'feeName'},
        // {title: '费用金额', dataIndex: 'totalFee', key: 'totalFee'},
        // {title: '费用币种', dataIndex: 'currency', key: 'currency'},
        // {title: '汇率', dataIndex: 'rate', key: 'rate'},
        // {title: '开票抬头', dataIndex: 'invoiceTitle', key: 'invoiceTitle'},
        // {title: '认领币种', dataIndex: 'claimCurrency', key: 'claimCurrency'},
        // {title: '核销人', dataIndex: 'approverName', key: 'approverName'},
        // {title: '财务备注', dataIndex: 'memo', key: 'memo'},
        // {
        //     title: '操作', key: 'key_oprator',
        //     render: (text, record, index) => {
        //         let cancelLink = <RightBox resource={RightConstants.REVENUE.REVENUE_SINGLE_CLAIM_CANCEL}><a onClick={this.handleCancelClaim.bind(this, record.id)}>取消认领</a></RightBox>
        //         cancelLink = record.status === '1' && this.state.claim ? cancelLink : null;
        //         let submitLink = <RightBox resource={RightConstants.REVENUE.REVENUE_SINGLE_CLAIM_SUBMIT}><Popconfirm placement="leftTop" onConfirm={this.handleConfirmClaim.bind(this, record.id)}
        //             okText="是" cancelText="否" title={'是否确认提交财务审核'}><a>提交审核</a></Popconfirm>
        //         </RightBox>
        //         submitLink = record.status === '1' && this.state.claim ? submitLink : null;
        //         return <span>{cancelLink}{record.status === '1' && this.state.claim ? <div className="ant-divider" /> : null}{submitLink}</span>;
        //     }
        // }

        {title: '认领金额', dataIndex: 'claimFee', key: 'claimFee'},
        {title: '客户名称', dataIndex: 'cstName', key: 'cstName'},
        {
            title: '状态', key: 'status', render: (text, record, index) => {
                return <span>{statusClaimed[record.status] || "未知"}</span>
            }
        },
    ];

    unClaimColumns = [
        // {title: '订单编号', dataIndex: 'orderno', key: 'orderno'},
        // {title: '费用名称', dataIndex: 'feeName', key: 'feeName'},
        // {title: '费用金额', dataIndex: 'totalFee', key: 'totalFee'},
        // {title: '费用币种', dataIndex: 'currency', key: 'currency'},
        // {title: '汇率', dataIndex: 'rate', key: 'rate'},
        // {title: '余额', dataIndex: 'balance', key: 'balance'},
        {title: '客户名称', dataIndex: 'companyname', key: 'companyname'},
        {
            title: '本次认领', dataIndex: 'tgmanager', key: 'tgmanager',
            render: (text, record, index) => {
                let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};
                return (
                    <div>
                        <InputNumber min={0} max={99999999} value={record.claimAmount}
                                     onChange={this.onChangeClaimAmount.bind(this, record.id,)}/> <span
                        style={{marginLeft: 5}}>CNY</span>
                    </div>
                )
            }
        },
        {
            title: '操作', key: 'key_oprator',
            render: (text, record, index) => {
                let claimLink = <a onClick={this.handleClaim.bind(this, record)}>认领</a>
                return <span>{claimLink}</span>;
            }
        }
    ];

    render() {
        let dataSource = this.props.revenue.dataSource ? this.props.revenue.dataSource : {};

        let url = dataSource.url ? dataSource.url : undefined;
        let formItemLayout = {labelCol: {span: 8}, wrapperCol: {span: 14}};
        let formItemLayout2 = {labelCol: {span: 4}, wrapperCol: {span: 18}};
        let formItemLayout3 = {labelCol: {span: 7}, wrapperCol: {span: 16}};
        let total = (this.props.form.getFieldValue("amount") * this.props.form.getFieldValue("rate")) ? (this.props.form.getFieldValue("amount") * this.props.form.getFieldValue("rate")) : null;


        const {getFieldDecorator} = this.props.form;
        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this, 1)}
                    style={{display: this.state.disabled ? 'none' : 'inline-block'}}>保存</Button>,
            <Button key="submit" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this, 2)}
                    style={{display: this.state.disabled ? 'none' : 'inline-block'}}>提交</Button>,
            <Button key="approval" size="large" loading={this.props.loading} onClick={this.handleApproval.bind(this)}
                    style={{display: this.state.approval ? 'inline-block' : 'none'}}>提交</Button>,
            <Button key="cancel" size="large" loading={this.props.loading}
                    onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        //已认领的费用
        let claimedPageObj = pageObjGenerator(this.props.revenue.claimedPage, 'revenue/getListByBevenueId', {revenueId: dataSource.id}, this.props.dispatch);

        let unClaimPageObj = pageObjGenerator(this.props.revenue.unClaimPage, 'revenue/getUnClaimForPage', {
            revenueId: dataSource.id,
            currency: dataSource.currency,
            cstName: this.props.form.getFieldValue("cstName"),
            orderNo: this.props.form.getFieldValue("orderNo")
        }, this.props.dispatch, this.cleanClaimableSelected);

        let approvalCondition = {revenueId: dataSource.id, status: '2', approval: true};
        let approvalPageObj = pageObjGenerator(this.props.revenue.approvalPage, 'revenue/getListByBevenueId', approvalCondition, this.props.dispatch);

        /* 已锁定的费用 */
        let rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedLockedFeeKeys: selectedRowKeys
                })
            },
            onSelect: (record, selected, selectedRows, nativeEvent) => {
                let selectedLockedFees = [...this.state.selectedLockedFees];
                if (selected) selectedLockedFees.push(record)
                else selectedLockedFees = R.difference(selectedLockedFees, [record]);
                this.setState({selectedLockedFees});
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                let selectedLockedFees = [...this.state.selectedLockedFees];
                if (selected) selectedLockedFees = selectedLockedFees.concat(changeRows);
                else selectedLockedFees = R.difference(selectedLockedFees, changeRows);
                this.setState({selectedLockedFees});
            },
            getCheckboxProps: record => ({
                disabled: record.status !== '1'
            }),
            selectedRowKeys: this.state.selectedLockedFeeKeys
        };

        let selectedAmt = 0;
        let selectedLockedFees = this.state.selectedLockedFees ? this.state.selectedLockedFees : [];
        selectedLockedFees.map(item => selectedAmt = selectedAmt + item.claimFee)

        /* 可认领的费用 */
        let rowSelection2 = {
            onChange: (selectedRowKeys, selectedRows) => {
                selectedRows.map(item => {
                    item.claimAmount = item.balance
                });

                this.state.unClaimList.map(item => {
                    if (!selectedRowKeys.includes(item.id)) item.claimAmount = undefined;
                    else item.claimAmount = item.balance;
                })
                console.log(this.state.unClaimList);
                this.setState({
                    selectedClaimableFeeKeys: selectedRowKeys,
                    selectedClaimableFees: selectedRows
                })
            },
            getCheckboxProps: record => ({
                disabled: record.currency !== dataSource.currency
            }),
            selectedRowKeys: this.state.selectedClaimableFeeKeys
        };

        let claimedAmt = 0;
        let selectedClaimableFees = this.state.selectedClaimableFees ? this.state.selectedClaimableFees : [];
        selectedClaimableFees.map(item => claimedAmt = claimedAmt + item.claimAmount)

        return (
            <Modal maskClosable={false} visible={this.state.open} width={'60%'} title={"来账详情"}
                   confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="付款人名称" hasFeedback>
                                {getFieldDecorator('name', {
                                    rules: [{
                                        required: true, message: '请输入付款人名称',
                                    }],
                                    initialValue: dataSource.name
                                })(
                                    <Input disabled={this.state.disabled} maxLength="200"/>
                                )}
                            </FormItem>
                        </Col>


                        <Col span={12}>
                            <FormItem {...formItemLayout} label="来账银行" hasFeedback>
                                {getFieldDecorator('bank', {
                                    rules: [{
                                        required: true, message: '请输入来账银行',
                                    }],
                                    initialValue: dataSource.bank
                                })(
                                    <BizParams sprCode={"bankCode"} style={{ width: '100%' }} blank={true} disabled={this.state.disabled} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="来账账号" hasFeedback>
                                {getFieldDecorator('account', {
                                    rules: [{
                                        required: true, message: '请输入来账账号',
                                    }],
                                    initialValue: dataSource.account
                                })(
                                    <Input disabled={this.state.disabled} maxLength="200"/>
                                )}
                            </FormItem>
                        </Col>


                        <Col span={12}>
                            <FormItem {...formItemLayout} label="来账金额" hasFeedback>
                                {getFieldDecorator('amount', {
                                    rules: [{
                                        required: true, message: '请输入来账金额',
                                    }],
                                    initialValue: dataSource.amount,
                                    //
                                })(
                                    <InputNumber disabled={this.state.disabled} min={0} maxLength="18"
                                                 style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>



                        <Col span={12}>
                            <FormItem {...formItemLayout} label="收款银行" hasFeedback>
                                {getFieldDecorator('receiveBank', {
                                    rules: [{
                                        required: true, message: '请输入收款银行',
                                    }],
                                    initialValue: dataSource.receiveBank
                                })(
                                    <BizParams sprCode={"bankCode"} style={{ width: '100%' }} blank={true} disabled={this.state.disabled} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="收款账号" hasFeedback>
                                {getFieldDecorator('receiveAccount', {
                                    rules: [{
                                        required: true, message: '请输入来账账号',
                                    }],
                                    initialValue: dataSource.receiveAccount
                                })(
                                    <Input disabled={this.state.disabled} maxLength="200"/>
                                )}
                            </FormItem>
                        </Col>


                        <Col span={12}>
                            <FormItem {...formItemLayout} label="来账日期" hasFeedback>
                                {getFieldDecorator('receiveDate', {
                                    rules: [{
                                        required: true, message: '请选择来账日期',
                                    }],
                                    initialValue: dataSource.receiveDate ? moment(dataSource.receiveDate, Constants.DATEFORMAT) : undefined
                                })(
                                    <DatePicker disabled={this.state.disabled} style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={12}>
                            <FormItem {...formItemLayout} label="当前余额" hasFeedback>
                                {getFieldDecorator('balance', {
                                    initialValue: dataSource.balance
                                })(
                                    <InputNumber disabled={true}  style={{width: '100%'}} maxLength="18"/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    {/*<Row>*/}
                    {/*<Col span={12}>*/}
                    {/*<FormItem {...formItemLayout} label={<span className="ant-form-item-required">上传来账凭证</span>} hasFeedback>*/}
                    {/*<SingleDragger url={url} ref="url" dataSource={dataSource} module={Constants.BOOKING_MODULES[1]} disabled={this.state.disabled}*/}
                    {/*/>*/}
                    {/*</FormItem>*/}
                    {/*</Col>*/}
                    {/*</Row>*/}
                </Form>
                {dataSource.status === '2' ?
                    <Table
                        title={() => <span>
                            <span style={{color: 'red'}}>已锁定的费用</span>
                            <span style={{display: this.state.claim ? 'inherit' : 'none'}}>
                                <Button type="primary" style={{
                                    marginLeft: '1%',
                                    display: selectedLockedFees.length > 0 ? 'inline-block' : 'none'
                                }} onClick={this.cleanSelected.bind(this, true)}>清空</Button>

                                {/*<RightBox resource={RightConstants.REVENUE.REVENUE_SINGLE_CLAIM_CANCEL}>*/}
                                <Button
                                    loading={this.props.loading} type="primary" style={{
                                    marginLeft: '1%',
                                    display: selectedLockedFees.length > 0 ? 'inline-block' : 'none'
                                }} onClick={this.batchCancelClaim.bind(this)}>批量取消</Button>
                                {/*</RightBox>*/}


                                {/*<RightBox resource={RightConstants.REVENUE.REVENUE_SINGLE_CLAIM_SUBMIT}>*/}
                                <Popconfirm
                                    placement="leftTop" onConfirm={this.batchSubmitClaim.bind(this)}
                                    okText="是" cancelText="否" title={'是否确认提交财务审核'}><Button loading={this.props.loading}
                                                                                           type="primary" style={{
                                    marginLeft: '1%',
                                    display: selectedLockedFees.length > 0 ? 'inline-block' : 'none'
                                }}>批量提交</Button>
                                    </Popconfirm>
                                {/*</RightBox>*/}


                                <span style={{marginLeft: '1%'}}>已选择
                                <a style={{
                                    fontWeight: 600,
                                    marginLeft: '0.5%'
                                }}>{this.state.selectedLockedFees.length}</a> 项
                                <span style={{marginLeft: '1%'}}>{`金额合计: ${selectedAmt.toFixed(2)}`}</span>
                                    <span style={{marginLeft: '0.5%'}}>{dataSource.currency}</span>
                                </span>
                            </span>
                        </span>}
                        loading={this.props.loading}
                        rowKey='id'
                        dataSource={this.props.revenue.claimedList}
                        columns={this.claimedColumns}
                        bordered={true}
                        size={'small'}
                        pagination={claimedPageObj}
                        rowSelection={this.state.claim ? rowSelection : null}
                    /> : null
                }
                {this.state.claim ?
                    <div style={{marginTop: 30}}>
                        <Table
                            title={
                                () =>
                                    <Row>
                                        <Row style={{marginBottom: -15}}>
                                            <Col span={6}><FormItem {...formItemLayout3}
                                                                    label={'客户名称'}>{getFieldDecorator('cstName')(
                                                <Input/>)}</FormItem></Col>

                                            {/*<Col span={6}><FormItem {...formItemLayout3}*/}
                                            {/*                        label={'订单号'}>{getFieldDecorator('orderNo')(*/}
                                            {/*    <Input/>)}</FormItem></Col>*/}

                                            <Col span={6}>
                                                <Button type="primary" icon="search" style={{marginLeft: '7%'}}
                                                        onClick={this.handleSearchFee.bind(this, true)}>查询</Button>
                                            </Col>
                                        </Row>

                                        <Row type="flex" justify="start" align="middle" style={{
                                            width: "100%", display:
                                                selectedClaimableFees.length > 0
                                                    ? "inline-block"
                                                    : "none"
                                        }}
                                        >
                                            <span style={{color: 'red'}}>可认领的费用</span>
                                            <Button type="primary" style={{
                                                marginLeft: '1%',
                                            }} onClick={this.cleanSelected2.bind(this, true)}>清空</Button>
                                            <Button
                                                loading={this.props.loading} type="primary" style={{
                                                marginLeft: '1%',
                                            }} onClick={this.handleBatchClaim.bind(this)}>批量认领</Button>


                                            <span style={{marginLeft: '1%'}}>已选择
                                                <a style={{
                                                    fontWeight: 600,
                                                    marginLeft: '0.5%'
                                                }}>{this.state.selectedClaimableFeeKeys.length}</a> 项
                                                <span
                                                    style={{
                                                        marginLeft: '1%',
                                                        width: "180px"
                                                    }}>
                                                    {`金额合计: ${claimedAmt.toFixed(2)}`}</span>
                                                    <span style={{marginLeft: '0.5%'}}>{dataSource.currency}</span>
                                                </span>
                                        </Row>
                                    </Row>
                            }
                            loading={this.props.loading}
                            rowKey='id'
                            dataSource={this.state.unClaimList}
                            columns={this.unClaimColumns}
                            bordered={true}
                            size={'small'}
                            pagination={unClaimPageObj}
                            rowSelection={this.state.claim ? rowSelection2 : null}
                        />
                    </div>
                    : null
                }
                {this.state.approval ?
                    <div style={{marginTop: 30}}>
                        <Table
                            title={() => <span style={{color: 'red'}}>本次审核的费用</span>}
                            loading={this.props.loading}
                            rowKey='id'
                            dataSource={this.props.revenue.approvalList}
                            columns={this.claimedColumns}
                            bordered={true}
                            size={'middle'}
                            pagination={approvalPageObj}
                        />
                        <Row style={{marginTop: 30}}>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="审核结果" hasFeedback>
                                    {getFieldDecorator('result', {
                                        rules: [{
                                            required: true, message: '请选择审核结果',
                                        }],
                                    })(
                                        <Select style={{width: '100%'}}>
                                            <Select.Option value="3">同意</Select.Option>
                                            <Select.Option value="1">拒绝</Select.Option>
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem {...formItemLayout} label="当前审核人" hasFeedback>
                                    {getFieldDecorator('approver', {
                                        initialValue: sessionStorage.getItem(Constants.USER_NAME),
                                    })(
                                        <Input/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="备注" hasFeedback>
                                    {getFieldDecorator('memo', {
                                        rules: [{
                                            required: this.props.form.getFieldValue('result') === '1',
                                            message: '审核结果为拒绝时备注不能为空',
                                        }],
                                    })(
                                        <Input.TextArea maxLength="1000" autosize={{minRows: 3, maxRows: 9}}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    : null
                }
            </Modal>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.revenue,
        revenue: state.revenue,
        history: state.history
    };
}

export default connect(mapStateToProps)(revenueDetail);
